<template>
  <div class="container">
    <div class="w1300">
      <div class="comment-con">
        <look-both title="我的评论"></look-both>
        <div class="comment-status flex-yc">
          <span>全部（1079）</span>
          <span>好评（1079）</span>
          <span>中评（0）</span>
          <span>差评（0）</span>
        </div>
        <div class="con">
          <teacher-comment v-for="i in 3" :key="i"></teacher-comment>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Course from '@/pages/course/components/CourseCom.vue'
import LookBoth from '@/pages/course/components/LookBoth.vue'
import TeacherComment from '@/pages/course/components/TeacherComment.vue'
</script>

<style scoped lang="scss">
.container {
  overflow: hidden;
  background-color: #f7f8fa;

  > .con {
    flex-wrap: wrap;
  }

  .comment-con {
    padding: 0 16px 0 34px;
    margin-top: 63px;
    margin-bottom: 50px;
    background-color: #fff;

    .comment-status {
      padding-bottom: 13px;

      span {
        padding: 8px 12px;
        font-size: 14px;
        color: #8691a3;
        cursor: pointer;
        border: 1px solid $borderCol;
        border-radius: 3px;

        &:hover,
        &.active {
          color: $primary;
          background-color: #d8eef9;
          border-color: #d8eef9;
        }

        & + span {
          margin-left: 35px;
        }
      }
    }
  }
}
</style>
